<template>
  <view class="body">
    <image class="pdf" src="https://ainengli.hzjrsw.com/jkhx/pdf_report.png" />
    <!-- <u-overlay :show="show">
      <view class="overlays">
        <image class="img_generate" src="https://ainengli.hzjrsw.com/jkhx/generate.png"></image>
        <view class="generate_text">您的健康管理报告已生成！</view>
        <view @tap="toBuy" class="buy_btn">去购买</view>
        <image class="close_img" src="@/static/image/raozg/close.png" @click="show = false"></image>
      </view>
    </u-overlay> -->
    <view class="fixed">
      <!-- <button class="download_btn" @tap="pdfDownload">下载报告</button> -->
      <button class="confirm_btn" @tap="detail" >报告全文</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

const props = defineProps({
  pdfUrl: {
    type: String,
    default: 'https://ainengli.hzjrsw.com/mlsk/20231127/%E4%BD%93%E6%A3%80%E6%8A%A5%E5%91%8A.pdf'
  }
})

const userInfo = ref({})
const show = ref(false)
const filePath = ref('')

onMounted(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo')).patientInfo
  uni.downloadFile({
    url: props.pdfUrl,
    success: function (res) {
      if (res.statusCode === 200) {
        filePath.value = res.tempFilePath // 获取到本地临时路径
        // 调用wx.openDocument打开文件
        uni.openDocument({
          filePath: filePath.value,
          showMenu: true,
          success: function (res) {
            console.log('打开文档成功')
          },
          fail: function (err) {
            console.log('打开文档失败', err)
          }
        })
      }
    },
    fail: function (err) {
      console.log('下载文件失败', err)
    }
  })
})

// const pdfDownload = () => {
//   uni.getFileSystemManager().saveFile({
//     tempFilePath: filePath.value,
//     success: (res) => {
//       uni.showToast({
//         title: '下载成功',
//         icon: 'none'
//       })
//     }
//   })
// }
const detail = (e) => {
  uni.openDocument({
    filePath: filePath.value,
    showMenu: true,
    success: function (res) {
      console.log('打开文档成功')
    },
    fail: function (err) {
      console.log('打开文档失败', err)
    }
  })
}

</script>

<style lang="scss" scoped>
.body {
  height: calc(100vh - 322rpx);
  overflow: auto;
  background: #fff;
  .pdf {
    width: 100%;
    height: 922rpx;
  }
  .overlays {
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .img_generate {
    width: 580rpx;
    height: 622rpx;
    margin: 150rpx auto 0;
  }
  .generate_text {
    margin: -400rpx auto 0;
    position: relative;
    z-index: 10;
    font-weight: 600;
    font-size: 40rpx;
    color: #003e41;
  }
  .buy_btn {
    width: 500rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: linear-gradient(337deg, #00d1b6 0%, #42f1da 100%);
    box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(2, 188, 195, 0.2);
    border-radius: 44rpx;
    margin: 192rpx auto 0;
    position: relative;
    z-index: 10;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
  }
  .close_img {
    width: 64rpx;
    height: 64rpx;
    margin: 120rpx auto 0;
  }
  .fixed {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    gap: 24rpx;
    .download_btn {
      background: #ffffff;
      width: 100%;
      border-radius: 44rpx;
      font-weight: 500;
      font-size: 32rpx;
      border: 1rpx solid #00d1b6;
      color: #00d1b6;
    }
    .confirm_btn {
      width: 100%;
      background: #00d1b6;
      border-radius: 44rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
}
</style>
